<template>
  <!-- <p>全功能 <a  @click="des">销毁</a></p> -->
  <div :id="props.id" :style="{ border: '0.5px solid gray', margin: '5px', overflow: 'hidden', width: wh, height: wh }">
  </div>
  <!-- <div class="c" style="height: 500px;width: 500px"></div> -->
</template>

<script setup lang="ts">
import "./xncolorpicke.js"
import {ref, reactive, onMounted, toRefs, computed, watch} from 'vue'

const props = defineProps({
  item: {
    type: String || Object,
    default: () => {
      return
    }
  },
  index: {
    type: Number,
    default: () => {
      return
    }
  },
  wh: {
    type: String,
    default: () => {
      return ''
    }
  },
  id: {
    type: String,
    default: () => {
      return
    }
  },

})
const emit = defineEmits(['update:item', 'updateValue']);
const data = reactive({
  selectColor: ''
})
const {item, index, wh} = toRefs(props)
import {useI18n} from "vue-i18n";

const {locale} = useI18n()
onMounted(() => {
  new XNColorPicker({
    color: (typeof (props.item) == 'string' ? props.item : props?.item?.color) || '',
    width: 20,
    height: '20px',
    selector: `#${props.id}`,
    // selector: "#",//选择器容器
    showprecolor: true,//显示预制颜色
    prevcolors: null,//预制颜色，不设置则默认
    showhistorycolor: true,//显示历史
    historycolornum: 16,//历史条数
    format: 'rgba',//rgba hex hsla,初始颜色类型
    showPalette: true,//显示色盘
    show: false, //初始化显示
    lang: locale.value == 'zh' ? 'cn' : 'en',// cn 、en
    colorTypeOption: 'single,linear-gradient,radial-gradient',
    canMove: true,//选择器位置是否可以拖拽
    alwaysShow: false,
    // autoConfirm:true,
    onError: function (e) {

    },
    onCancel: function (color) {
    },
    onChange: function (color) {

    },
    onConfirm: function (color) {
      data.selectColor = color.color
      let initColor: any = ''
      // document.querySelector('.c').style.background ='linear-gradient(0.0deg,#b71b1c 0.0,#24afeb 100.0%)'
      if (data.selectColor?.rgba) {
        initColor = data.selectColor.rgba
      } else {
        initColor = data.selectColor.str
      }
      if (color.colorType == "linear-gradient") {
        initColor = {
          type: 'linear',
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            //   {
            //   offset: 0, color: 'red' // 0% 处的颜色
            // }, {
            //   offset: 1, color: 'blue' // 100% 处的颜色
            // }
          ] as any,
          global: false // 缺省为 false
        }
        let test = color.color.arry.colors
        initColor.color = color.color.str
        test.map((item: any, index) => {
          initColor.colorStops.push({
            offset: parseFloat(item.per / 100).toFixed(2),
            color: item.color
          })
        })
      }


      emit('updateValue', initColor, index)
    }
  })


})
// function des(){
//   xncolorpicker.destroy()
// }

</script>

<style scoped>
.c {
  background: linear-gradient(0.0deg, #a850d7 0.0, #24afeb 100.0%)
}
</style>

